<template>
  <!-- 代理合作 -->
  <div class="table-content">
    <div class="tab">
      <div :class="{ tab_ac: tab_id == 1 }" @click="tab_id = 1">{{ t("General Report") }}</div>
      <div :class="{ tab_ac: tab_id == 2 }" @click="tab_id = 2">{{ t("Direct Report") }}</div>
      <div :class="{ tab_ac: tab_id == 3 }" @click="tab_id = 3">{{ t("Team Report") }}</div>
    </div>
    <div class="form">
      <div class="form_one">
        <nut-menu class="form_date" :overlay="false">
          <template #icon>
            <iconpark-icon icon-id="calendar1" size="1.2rem" class="refresh"></iconpark-icon>
          </template>
          <nut-menu-item :title="dateText" ref="calendarItemRef">
            <nut-calendar-card v-model="date" type="range" @change="calendarChange"></nut-calendar-card>
          </nut-menu-item>
        </nut-menu>
        <SelectItem :key="1" @change="changeStatus" :active="dateRange" :options="dateRangeOptions" />
      </div>
      <div class="form_two mt-5">
        <div class="form_date">
          <nut-input v-model="params.search_name" :placeholder="t('empty_tips1')" @change="handleAccountChange">
            <template #left>
              <iconpark-icon icon-id="sousuo" size="1.2rem" class="refresh"></iconpark-icon>
            </template>
          </nut-input>
        </div>
        <SelectItem :key="2" @change="changeSearch_lev" :active="params.search_lev" :options="levels" />
      </div>
    </div>
    <div>
      <div class="level_info">
        <!--表头-->
        <div class="table_column">
          <div class="td" v-for="(item, i) in tableHeader" :key="i">
            <span>{{ t(item.lang || '--') }}</span>
            <ImgT src="/imgs/me/table_line.png" alt="" />
          </div>
        </div>
        <!--数据-->
        <div class="tr" v-for="(row, index) in resultList" :key="index">
          <div class="td" :class="{ 'td_money': item.isMoney }" v-for="(item, i) in tableHeader" :key="i"
            @click="(e) => clickTd(e, row)" v-html="rowHandle(row, item.key)"></div>
        </div>
      </div>
    </div>
    <nut-empty v-if="!resultList.length" :description="t('nomore_data')"></nut-empty>
    <LevelManage @success="queryData" ref="LevelM" v-model="visible" :proxyInfo="props.proxyInfo" :currentUser="currentUser"
      :IdentityMap="IdentityMap" />
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, onUnmounted, reactive, ref, watch } from 'vue'
import { MessageEvent2 } from "@/net/MessageEvent2.ts";
import { NetMsgType } from "@/netBase/NetMsgType.ts";
import { IdentityMap } from "@/enums/proxyEnum";
import { NetPacket } from "@/netBase/NetPacket.ts";
import H5Websocket from "@/net/Net1";
import { useI18n } from "vue-i18n";
import LevelManage from "./levelManage.vue";
import { storeToRefs } from 'pinia';
import pinia from "@/store";
import { User } from '@/store/user';
import { showToast } from "@nutui/nutui";

const UserStore = User(pinia);
const { info: userInfo, roleInfo } = storeToRefs(UserStore);

const { t } = useI18n();

onMounted(() => {
  search()
})

interface List {
  role_id: number
  level: number
  team_num: number
  personal_bet: number
  team_bet: number
  personal_return: number
  team_return: number
  username: string
}

const props = defineProps({
  proxyInfo: { // 当前代理详情
    type: Object,
    default: () => {
    }
  }
})

const tab_id = ref(1)
const tableHeader = computed(() => { // 表头
  return {
    1: [
      { title: "会员账号", key: 'username', lang: 'Account No' },
      { title: "层级", key: 'level', lang: 'Hierarchy' },
      { title: "团队佣金", key: 'team_return', isNumber: true, isMoney: true, lang: 'proxy_page_teamYj' },
      { title: "直属玩家佣金", key: 'personal_return', isNumber: true, isMoney: true, lang: 'proxy_page_zsCommission' },
    ],
    2: [
      { title: "会员账号", key: 'username', lang: 'Account No' },
      { title: "层级", key: 'level', lang: 'Hierarchy' },
      { title: "有效流水", key: 'personal_bet', isNumber: true, isMoney: true, lang: 'proxy_page_yxBet' },
      { title: "直属玩家佣金", key: 'personal_return', isNumber: true, isMoney: true, lang: 'proxy_page_zsCommission' },
    ],
    3: [
      { title: "会员账号", key: 'username', lang: 'Account No' },
      { title: "层级", key: 'level', lang: 'Hierarchy' },
      { title: "有效流水", key: 'team_bet', isNumber: true, isMoney: true, lang: 'proxy_page_teamBet' },
      { title: "团队佣金", key: 'team_return', isNumber: true, isMoney: true, lang: 'proxy_page_teamYj' },
      { title: "人数", key: 'team_num', isNumber: true, lang: 'proxy_page_numBer' },
      // { title: "操作", key: 'operate', lang: 'proxy_page_caoZ' },
    ],
  }[tab_id.value]
})
const result = reactive<{
  total_page: number
  list: List[]
}>({
  total_page: 0,
  list: []
})
const resultList = computed(() => {
  let arr: any = []
  // 自己是不是直属
  if (props.proxyInfo.level == 0) return arr
  result.list.map((item: any) => {
    if (item.role_id == roleInfo.value?.id && tab_id.value != 3) {
      arr.push(item)
    } else if (tab_id.value == 1) {
      arr.push(item)
    } else if (tab_id.value == 2 && item.level === 0) {
      arr.push(item)
    } else if (tab_id.value == 3 && item.level !== 0 && item.role_id !== roleInfo.value?.id) {
      arr.push(item)
    }
  })
  console.log('list', arr)
  console.log('roleInfo.value', roleInfo.value)
  return arr
})
const params: any = reactive({ // 搜索参数
  page: 1,
  search_name: "",
  search_lev: "-1",
})
const levels = computed(() => {
  const arr = []
  Object.keys(IdentityMap).map((key: string) => {
    if ((props.proxyInfo.level || 0) > Number(key)) {
      arr.push({ label: IdentityMap[key], value: key })
    }
  })
  arr.unshift({ label: t('ALL'), value: '-1' })
  return arr
})
const visible = ref(false) // 弹窗是否显示
const currentUser = ref({}) //当前点击的用户

// 日期范围下拉
const dateRange = ref("today") // 日期范围值
const dateRangeOptions = ref(
  [ // 日期范围下拉列表
    { label: t('Day_1'), value: "today", lang: 'Day_1' },
    { label: t('Day_2'), value: 3, lang: 'Day_2' },
    { label: t('Day_3'), value: "week", lang: 'Day_3' },
    { label: t('Day_4'), value: "month", lang: 'Day_4' },
    { label: t('Day_5'), value: 7, lang: 'Day_5' },
    { label: t('Day_6'), value: 15, lang: 'Day_6' },
    { label: t('Day_7'), value: 30, lang: 'Day_7' },
  ]
)
// 日期
const date = ref<[Date, Date]>()
// // 展示日期
const dateText = computed(() => {
  if (date.value?.length === 2) {
    return `${date.value[0].getDate()}/${date.value[0].getMonth() + 1}/${date.value[0].getFullYear()} - ${date.value[1].getDate()}/${date.value[1].getMonth() + 1}/${date.value[1].getFullYear()}`;
  }
  return "";
})

const calendarItemRef = ref<{ toggle: () => void } | null>(null)
// 日历选择change回调
const calendarChange = (value: Date[]) => {
  if (value.length === 2) calendarItemRef.value?.toggle()
}
// 获取日期范围
watch(dateRange, val => {
  console.log(getDateRange(val), "getDateRange(val)")
  date.value = getDateRange(val)
}, { immediate: true })
// 日期变化时获取数据
watch(date, val => {
  if (val?.length === 2) {
    search();
  }
})

// 获取日期范围
function getDateRange(option: string | number): [Date, Date] {
  const today = new Date();
  let startDate, endDate;

  switch (option) {
    case 'today':
      startDate = new Date(today);
      endDate = new Date(today);
      break;
    case 'week':
      startDate = new Date(today);
      startDate.setDate(today.getDate() - today.getDay() + 1); // assuming the week starts on Monday
      endDate = new Date(startDate);
      endDate.setDate(startDate.getDate() + 6);
      break;
    case 'month':
      startDate = new Date(today.getFullYear(), today.getMonth(), 1);
      endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0);
      break;
    default:
      if (typeof option === 'number') {
        startDate = new Date(today);
        startDate.setDate(today.getDate() - option + 1);
        endDate = new Date(today);
      } else {
        throw new Error('Invalid value');
      }
  }

  return [startDate, endDate];
}

// 账号change事件
const handleAccountChange = () => {
  search()
}

// 搜索
const search = () => {
  params.page = 1
  queryData()
}
const changeSearch_lev = (v: any) => {
  params.search_lev = v
  search()
}

function extractDateTime(dateObj: Date): {
  year: number;
  month: number;
  day: number;
  hour: number;
  minute: number;
  second: number;
} {
  return {
    year: dateObj.getFullYear(),
    month: dateObj.getMonth() + 1,
    day: dateObj.getDate(),
    hour: dateObj.getHours(),
    minute: dateObj.getMinutes(),
    second: dateObj.getSeconds()
  };
}


// 查询
const queryData = () => {
  result.total_page = 0
  result.list = []
  const query = NetPacket.req_daily_return_his()
  Object.assign(query.start_time, extractDateTime(date.value![0]))
  Object.assign(query.end_time, extractDateTime(date.value![1]))
  query.page = params.page
  query.search_name = params.search_name
  query.search_lev = params.search_lev
  H5Websocket.sendMessageHandler(query);
}

// 数据处理
const resultHandle = (rs: any) => {
  result.total_page = rs.total || 0
  result.list = rs.records || []
}

// 处理行数据
const rowHandle = (row: any, key: string) => { // 格子数据处理
  let rs: any = ''
  let val = row[key]
  switch (key) {
    case "username":
      rs = tab_id.value == 1 ? `<span>${val}</span>` : `<span id='username' style="border-bottom:1px solid #87a1ce">${val}</span>`
      break
    case "level":
      rs = IdentityMap[val] || '--'
      break
    case "team_num":
    case "team_bet":
    case "personal_bet":
    case "personal_return":
    case "team_return":
      rs = Number(val).toLocaleString()
      break
    case "operate":
      rs = (userInfo.value.full_name == row.username) ? '-' : `<span  class="td_btn" style="color: #80FF44;cursor: pointer;user-select: none;">${t('proxy_page_manage')}</span>`
      break
    default:
      rs = val
  }
  return rs
}
const changeStatus = (value: any) => { // 切换状态
  dateRange.value = value
}
const clickTd = (e: any, row: any) => { // td点击事件
  if (tab_id.value !== 1 && userInfo.value.full_name != row.username && e.target.id == 'username') {
    if (userInfo.value.full_name == row.username) {
      showToast.fail(t('already_max_level'));
      return
    } else if (Number(roleInfo.value.agent_level) == 1 && tab_id.value == 2) {// 判断能否修改:见习代理(1)可修改直属报表；任意身份修改团队报表内比自己小一级的时候，需要提示已经是最高等级了
      currentUser.value = row
      visible.value = true
    } else if (Number(roleInfo.value.agent_level) - row.level < 2) {
      showToast.fail(t('already_max_level'));
      return
    }
    currentUser.value = row
    visible.value = true
  } else if (tab_id.value !== 1 && userInfo.value.full_name == row.username && e.target.id == 'username') {
    showToast.fail(t('already_max_level'));
  }
}

// 回执监听
MessageEvent2.addMsgEvent(
  NetMsgType.msgType.msg_notify_daily_return_his,
  resultHandle,
);
onUnmounted(() => {
  // 取消监听
  MessageEvent2.removeMsgEvent(NetMsgType.msgType.msg_notify_daily_return_his, null);
});
</script>

<style lang="scss" scoped>
.tab {
  margin-top: 10px;
  height: 45px;
  display: flex;
  align-items: center;
  padding: 0 4px;
  color: #C6C4F5;

  div {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #C0C2DB;
    border-bottom: 2px solid transparent;
  }

  .tab_ac {
    color: #5B6CFF;
    height: 34px;
    border-bottom: 2px solid #833DFF;
    // margin-top: 5px;
  }
}

.form {
  margin-top: 8px;

  .form_one,
  .form_two {
    display: flex;
    width: 100%;
    box-shadow: 0.5px 0.5px 1px 0px #333260 inset;
    background: #1D1C3C;
    padding: 10px;
    margin-bottom: 10px;


    .form_date {
      height: 24px;
      width: 210px;
      border-radius: 5px;
      display: flex;
      align-items: center;
      padding: 2px 5px;
      box-sizing: border-box;
      position: relative;

      .date_box {
        position: absolute;
        right: -105px;
        left: 5px;
        top: 30px;
        height: 100px;
        z-index: 100;
        border-radius: 12px;
        background: rgba(51, 29, 143, 0.9)
      }

      &:deep(.nut-input) {
        height: 24px;
        border-bottom: unset;
        background: transparent;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: unset;

        .nut-input-value {
          height: 24px;
        }

        .input-text {
          height: 24px;
        }
      }

      :deep() {
        input {
          &::placeholder {
            color: #504F6F;
          }
        }
      }
    }

    :deep(.select_item) {
      width: 120px;
      box-shadow: 0.5px 0.5px 1px 0px #595794 inset !important;
      background: #32305F !important;
      padding: 4px;

      .nutui-iconfont {
        color: #C6C4F5 !important;
        font-size: 14px !important;
      }
    }
  }

  .form_one {
    :deep() {
      .nut-menu__bar {
        height: 24px;
        width: 210px;
        background: transparent !important;
        border-radius: 5px;
        display: flex;
        align-items: center;
        padding: 2px 13px;
        box-sizing: border-box;
        position: relative;

        .nut-menu__title-icon {
          position: absolute;
          left: 0;
          transform: rotate(0deg) !important;
        }
      }

      .nut-menu-item__content {
        max-height: 500px !important;
      }

    }
  }
}

.level_info {
  margin-top: 10px;
  border-radius: 8px;
  background: radial-gradient(87.04% 93.77% at 50% 13.97%, #4C36B3 0.17%, #3A2786 74.42%, #3C279A 100%);

  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.39), 0 2px 2px 0 rgba(0, 0, 0, 0.34), 0 5px 3px 0 rgba(0, 0, 0, 0.2), 0 8px 3px 0 rgba(0, 0, 0, 0.06), 0 13px 3px 0 rgba(0, 0, 0, 0.01);

  // background-color: #1f2032;
  .table_column {
    display: flex;

    div {
      height: 42px;
      // line-height: 42px;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      // flex:1;
      text-align: center;
      color: #ffffff;
      font-size: 10px;
      font-weight: 900;
      position: relative;


      img {
        height: 42px;
        position: absolute;
        right: -1px;
        top: 0;
      }

      &:last-child {
        flex: 1;
        border-right: unset;

        img {
          display: none;
        }
      }
    }
  }
}

.tr {
  display: flex;

  &:nth-child(even) {
    background-image: radial-gradient(circle at 50% 11%, #361e79, #202137 97%);
    color: #87a1ce;
  }

  &:nth-child(odd) {
    background-color: #2f1d7d;
    color: #fff;
  }

  .td {
    flex: 1;
    padding: 4px 14px 4px 9px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
  }
}

.date_picker {
  width: 210px;
  background: #27155C;
  box-shadow: 0px 4px 4px 0px #00000040 inset;
  border-radius: 5px;
  padding-left: 5px;

  .refresh {
    transform: translateY(2px);
  }

  .dp__input_icon {
    left: 6px;
    display: flex;
    align-items: center;
    background: #27155C;
    box-shadow: 0px 4px 4px 0px #00000040 inset;
  }

  :deep() {
    input {
      width: 150px;
      height: 24px;
      border-radius: 5px;
      background: #27155C;
      box-shadow: 0px 4px 4px 0px #00000040 inset;
      border: none;
      color: #fff;
      margin-left: 25px;
      font-size: 12px;
      padding: 0 !important;
    }
  }
}

.nut-menu {
  width: 140px;
  box-shadow: unset !important;
  background: transparent !important;
}

:deep() {
  .nut-popup {
    background: transparent;
  }

  .nut-calendarcard {
    background: radial-gradient(circle, rgba(59, 39, 153, .9), rgba(67, 47, 157, 1));
    color: #8e82c2;
    width: 220px;
  }

  svg {
    fill: #8e82c2;
  }

  .nut-calendarcard-day.active,
  .nut-calendarcard-day.start,
  .nut-calendarcard-day.end {
    background-color: #578ef5;
  }

  .nut-calendarcard-day.weekend {
    color: #578ef5;
  }

  .nut-calendarcard-day.mid {
    background-color: rgba(87, 142, 245, 0.2);
    color: #578ef5;
  }

  .date_range {
    .nut-popup {
      background: radial-gradient(circle, rgba(59, 39, 153, .6), rgba(67, 47, 157, .8));
    }

    .nut-menu-item__option {
      color: #8e82c2;
    }

    .active {
      color: #578ef5 !important;
    }
  }

  .nut-calendarcard-day.weekend {
    color: #fff !important;
  }

  .nut-calendarcard-day {
    width: 30px;
    height: 30px;
  }

  .nut-calendarcard-header-left,
  .nut-calendarcard-header-right {
    margin: 10px;
  }
}

:deep() {
  .dp__menu {
    border: none;
  }

  .dp__arrow_top {
    background-color: #422789;
    z-index: -1;
    border: none;
  }

  .dp__theme_light {
    --dp-background-color: radial-gradient(circle, rgba(86, 33, 126, 1) 0%, rgba(60, 41, 140, .9) 100%);
    --dp-text-color: #fefeff;
  }
}
</style>
